<template>
  <div>
    <el-table ref="table" border :data="tableData.slice((currentPage - 1) * pagesize, currentPage*pagesize)" height="400px"
              @selection-change="handl" stripe style="width: 100%;">
      <el-table-column type="selection" width="180"></el-table-column>
      <!--      <el-table-column type="index" label="序号" width="180"></el-table-column>-->
      <el-table-column prop="id" label="id" width="180"></el-table-column>
      <el-table-column prop="goods" label="名称" width="180"></el-table-column>
      <el-table-column prop="goodsnum" label="价格"></el-table-column>
      <el-table-column prop="type" label="说明"></el-table-column>

      <el-table-column  label="操作">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini"  @click="bianji(scope.row)">编辑</el-button>
          <!--          弹出框-->
          <el-dialog title="修改商品信息" :visible.sync="dialogFormVisible">
            <el-form :model="tform">
              <el-form-item label="序号" :label-width="formLabelWidth">
                <el-input v-model="tform.id"></el-input>
              </el-form-item>
              <el-form-item label="商品名称" :label-width="formLabelWidth">
                <el-input v-model="tform.goods"></el-input>
              </el-form-item>
              <el-form-item label="商品图片" :label-width="formLabelWidth">
                <el-input v-model="tform.goodsid"></el-input>
              </el-form-item>
              <el-form-item label="商品价格" :label-width="formLabelWidth">
                <el-input v-model="tform.goodsnum"></el-input>
              </el-form-item>
              <el-form-item label="说明" :label-width="formLabelWidth">
                <el-input v-model="tform.type"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="queding()">确 定</el-button>
            </div>
          </el-dialog>
          <!--          删除-->
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="remove(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <br>
    <el-row>
      <el-col>
        <el-button size="mini" type="primary" @click="huoqu">购买</el-button>
      </el-col>
    </el-row>
    <br>
    <!--    分页-->
    <el-pagination background :page-size.sync="pagesize" :page-sizes.sync="pagesizes"
                   :current-page.sync="currentPage"
                   @size-change="sizeChange"
                   @current-change="currentChange"
                   layout="sizes,prev, pager, next,jumper" :total="50"></el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pagesize: 4, // 当前页多少条数据
      pagesizes: [2, 3, 4, 6, 9], // 设置条数
      currentPage: 1, // 默认当前页
      selections: [],
      tableData: [],
      dialogFormVisible: false, // 弹窗显示
      formLabelWidth: '120px', // 弹窗大小宽度
      tform: {
        id: '',
        goodsid: '',
        goods: '',
        goodsnum: '',
        type: ''
      }
    }
  },
  mounted () { // 界面一加载执行的方法
    showData(this)
  },
  methods: {
    handl (value) {
      // console.log(value)
      // this.selections = value
    },
    huoqu () {
      // console.log(this.selections)
    },
    bianji (row) {
      this.tform.id = row.id
      this.dialogFormVisible = true
    },
    // 修改信息
    queding () {
      this.$axios.post('/updGoods', {
        id: this.tform.id,
        goods: this.tform.goods,
        goodsnum: this.tform.goodsnum,
        goodsid: this.tform.goodsid,
        type: this.tform.type
      }).then(res => {
        if (res.data.code === 1) {
          this.$message.success('修改成功+++++++++++++++++++++++++++++++++++')
          this.dialogFormVisible = false
          showData(this)
        }
      })
    },
    remove (id) { // 删除数据
      console.log(id)
      this.$axios.get('/delGoods', {
        params: {
          'id': id
        }
      }).then(res => {
        if (res.data === 'success') {
          this.$message.success('删除成功')
          showData(this)
        }
      }).catch(error => {
        console.log(error)
        this.$message.error('删除失败')
      })
    },
    sizeChange (size) {
      // console.log(size)
    },
    currentChange (page) {
      // console.log(page)
    }
  }
}
// 查询数据
function showData ($this) {
  $this.$axios.get('/goods').then(response => {
    console.log(response.data)
    $this.tableData = response.data.list
  }).catch(err => {
    console.log(err)
  })
}
</script>
